<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<style type="text/css">
			form{
				width: 600px;
				height: auto;
				margin: 0px auto;
				border: solid 1px red;
			}
		</style>
		<script type="text/javascript">
			//验证用户名
			function isUname(){
				//获得用户名的文本框的值
				var uname=document.getElementById("uname").value;
				//用户名的正则表达式
				var regUname=/^[a-zA-Z0-9_\u4e00-\u9fa5]{2,5}$/;
				
				if (regUname.test(uname)) {
					//用户名符合格式,就要发送异步ajax请求到后台,判断当前用户是否注册过
					//1.创建ajax引擎对象
					var ajaxObject;
					if(window.XMLHttpRequest){//新浏览器
						ajaxObject=new XMLHttpRequest();
					}else{//IE5,6
						ajaxObject=new ActiveXObject("Microsoft.XMLHTTP")
					}

					//2.创建请求
					ajaxObject.open("get","StudentServlet?method=isUser&uname1="+uname,true);

					//3.发送ajax请求
					ajaxObject.send();

					//4.调用回调函数,接收响应数据
					ajaxObject.onreadystatechange=function () {
						//判断请求正常处理完,响应也正常时就接收结果
						if (ajaxObject.readyState==4&&ajaxObject.status==200){
							//声明一个变量接收响应字符串
							var result=ajaxObject.responseText;
							if(result=="1"){
								document.getElementById("uname1").style.color="red";
								document.getElementById("uname1").innerHTML="用户名已注册";
							}else{
								document.getElementById("uname1").style.color="green";
								document.getElementById("uname1").innerHTML="√";
							}
						}
					}


					document.getElementById("uname1").innerHTML="";
					return true;
				} else{
					document.getElementById("uname1").style.color="red";
					document.getElementById("uname1").innerHTML="用户名输入有误!";
					return false;
				}
			}
			
			//验证密码
			function isPwd(){
				//获得用户输入的密码
				var pwd=document.getElementById("pwd").value;
				//密码正则表达式
				var regPwd=/^\d{6}$/;
				if(regPwd.test(pwd)){
					document.getElementById("pwd1").innerHTML="";
					return true;
				}else{
					document.getElementById("pwd1").style.color="red";
					document.getElementById("pwd1").innerHTML="密码输入有误!";
					return false;
				}
			}
			
			//确认密码
			function isRepwd(){
				//获得用户输入的原密码
				var pwd=document.getElementById("pwd").value;
				//获得用户输入的确认密码
				var repwd=document.getElementById("repwd").value;
				if (repwd=="") {
					document.getElementById("repwd1").style.color="red";
					document.getElementById("repwd1").innerHTML="确认密码不能为空";
					return false;
				}else if(pwd!=repwd){
					document.getElementById("repwd1").style.color="red";
					document.getElementById("repwd1").innerHTML="两次密码输入不一致";
					return false;
				}else{
					document.getElementById("repwd1").innerHTML="";
					return true;
				}
			}
			
			//验证邮箱
			function isEmail(){
				//获得用户输入的邮箱
				var pwd=document.getElementById("email").value;
				//邮箱正则表达式
				var regPwd=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if(regPwd.test(pwd)){
					document.getElementById("email1").innerHTML="";
					return true;
				}else{
					document.getElementById("email1").style.color="red";
					document.getElementById("email1").innerHTML="邮箱输入有误!";
					return false;
				}
			}
			
			//同意协议
			function isAgree(){
				//获得同意协议的选项
				var ob=document.getElementById("agree1");
				if(ob.checked==true){
					document.getElementById("reg1").disabled=false;
				}else{
					document.getElementById("reg1").disabled=true;
				}
			}
			
			//表单提交事件
			function check(){
				//验证用户名结果
				var unameResult=isUname();
				//验证密码结果
				var pwdResult=isPwd();
				//确认密码结果
				var repwdResult=isRepwd();
				//验证邮箱结果
				var emailResult=isEmail();
				//验证爱好的结果
				var hobbyResult=function(){
					//获得爱好多选框
					var hobbys=document.getElementsByName("hobby");
					//声明一个变量作记录器,记录有多少个爱好被选中
					var count=0;
					for(var i=0;i<hobbys.length;i++){
						if (hobbys[i].checked==true) {
							count++;
						}
					}
					if (count>=2) {
						return true;
					} else{
						alert("选择的爱好不能少于两个!");
						return false;
					}
				}
				
				//表单的所项符合要求就要提交表单,否则阻止表单提交
				if(unameResult&&pwdResult&&repwdResult&&emailResult&&hobbyResult()){
					return true;
				}else{
					return false;
				}
			}
			
		</script>
	</head>
	<body>
		<!--表单-->
		<form method="post" action="CommonServlet" onsubmit="return check()">
			<!--用隐藏域传参:用method作为标记名,register作为标记值,告诉Servlet接收register就要作注册功能 -->
			<input type="hidden" name="method" value="register"/>
			<table>
				<tr>
					<td></td>
					<td>
						<h1>
						<c:choose>
							<c:when test="${empty flag}">注册页面</c:when>
							<c:otherwise>添加学生信息页面</c:otherwise>
						</c:choose>
						<!-- 用隐藏域将老师添加学生的标记传到后台 -->	
						<input type="hidden" name="flag1" value="${flag }" />
						</h1>
					</td>
					<td></td>
				</tr>
				<tr>
					<td>用户名:</td>
					<td><input type="text" id="uname" name="name" onblur="isUname()"/></td>
					<td id="uname1">必填项,长度为2-5的汉字,字母,数字或_</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" id="pwd" name="password" onblur="isPwd()"/></td>
					<td id="pwd1">必填项,6位数字</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" id="repwd" name="repwd" onblur="isRepwd()"/></td>
					<td id="repwd1">必填项,与密码相同</td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td><input type="text" id="email" name="email" onblur="isEmail()"/></td>
					<td id="email1"></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="man" checked="checked"/>男
				 		<input type="radio" name="sex" value="woman"/>女
					</td>
					<td></td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="hobby" value="sing"/>sing
						<input type="checkbox" name="hobby" value="dance"/>dance
						<input type="checkbox" name="hobby" value="rap"/>rap<br />
						<input type="checkbox" name="hobby" value="sleep"/>sleep
						<input type="checkbox" name="hobby" value="study"/>study
						<input type="checkbox" name="hobby" value="basketball"/>basketball
					</td>
					<td>必填项,至少选择两个爱好</td>
				</tr>
				<tr>
					<td>出生城市:</td>
					<td>
						<select name="city">
							<option value="beijing">北京</option>
							<option value="shanghai">上海</option>
							<option value="shengzhen">深圳</option>
							<option value="zhengzhou">郑州</option>
							<option value="donngbei">东北</option>
							<option value="donngbei">济源</option>
						</select>
					</td>
					<td></td>
				</tr>
				<tr>
					<td>协议:</td>
					<td>
						<textarea rows="6" cols="20">
							请阅读以下协议
						dfeifiefefefeffefe,fefefefefefefefefefefefefefefef
						</textarea>
					</td>
					<td><input type="checkbox" id="agree1" onclick="isAgree()"/>同意协议</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<!--提交按纽-->
						<input type="submit" value="提交" id="reg1" disabled="disabled"/>
						<!--重置按纽-->
						<input type="reset" value="重置"/>
					</td>
					<td></td>
				</tr>
			</table>
		</form>
	</body>
</html>